微信小程序（新）必备知识

组件化开发

小程序在未出现组件之前，要重用的话，只能简单（复制）粗暴（黏贴）

组件化开发的优势：
1、可复用（wxml/wxss/js）
2、代码分离，可维护（更重要）

• 定义组件

先创建components文件夹：用于存放组件，然后再创建组件文件夹
注意：组件的文件名并不是组件名，而页面文件名是页面名，组件名是引用时才确定的

• 引入与使用组件

页面先引用后使用

在页面的配置文件（.json）中引入组件
{
    "usingComponents": {
        "组件名"："/components/tab/index"
    }
}

在页面中使用组件
<组件名 />

• 全局样式的继承

（定义在app.wxss中）全局样式，页面是全部继承的，而自定义组件只是部分继承

**全局样式一般设置字体和字体大小

只支持font、color样式组件可以继承，其他样式不继承

• 组件设计原则

1、尽量不要留空白间距

• 组件事件与绑定

1、给组件绑定事件（.wxml）
<text  bind:tap="tapLove">components/love/index.wxml</text>

2、实现组件事件处理函数（.js）
methods: {
   tapLove(ev){
      console.log(ev);
   }
}

• 组件data与properties的区别

页面只有data，而组件有data和properties

---

data与properties中的数据都可以在组件中进行单向数据绑定

原理：
与页面其实一样，小程序编译后，data与properties将会和并成一个data 
（如果data中与peoperties中有重名数据，优先peoperties）
所以进行动态数据绑定还是使用this.setData()方法

使用原则：
data：内部数据
properties：外部数据（页面调用组件，传递进来的数据，不传递就使用默认值）

• 组件获取外部数据的途径

1、通过组件属性（接收参数，而页面是通过onLoad(options)接收）
2、通过getApp().globalData.xxx 获取全局数据
3、通过缓存获取全局数据

• 组件与业务逻辑

到底业务逻辑是放在组件中还是该放在页面中？

由于组件是可复用的，每个页面都可以使用同一个组件，此时需要看清楚这个业务逻辑是 **共有** 还是 **个性** 的
共有的必须写在组件内（例如样式）
个性的必须写在页面中（例如请求URL）

• observer函数

组件的属性值被更改时的响应函数，注意如果在observer函数中使用this.setData()修改自身属性可能发生死循环导致内存溢出

插件开发

事件与事件处理

• 事件作用

1、事件是视图层到逻辑层的通讯方式（小程序内置事件）
2、组件与页面的通讯（自定义事件）

• 小程序内置事件

长按事件：longpress
点击事件：tap
触摸动作开始：touchstart
触摸后移动：touchmove
触摸动作结束：touchend

还有各个组件上都有各自特定的事件

• 事件绑定（绑定事件处理函数）

有2种方式：bind、catch 无论是内置还是自定义事件，都是使用这种方式

写法：
bind:tap/bind:touchmove
catch:tap/catch:touchmove

bind与catch的区别
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

• 事件分类

事件分为页面事件和组件事件

页面事件主要写在页面中，在页面wxml内组件先绑定事件bind:tap，在js中再绑定事件处理函数
组件事件主要写在组件中，在组件wxml内组件先绑定事件bind:tap，在js中再绑定事件处理函数

**页面与组件在事件绑定和处理上是完全独立的2个部分，互相没有关联，也不能互换
**组件的事件可以冒泡到页面上去

• 自定义事件激活及处理

// 自定义事件激活
this.triggerEvent('myevent', {
    param:"wutao"
}, {});
// 第一个参数：自定义事件名称
// 第二个参数：detail对象，自定义数据（传参数）
// 第三个参数：触发事件的选项

// 自定义事件处理：在页面wxml的组件调用标签处写下如下代码
<c-love bind:myevent="onMyEvent" />

新布局

flex 新一代布局样式，以前很难实现的布局，现在变简单了

• 注意

1、元素本身不会因为display:flex而改变原本块状或行间特性
2、flex下的item元素会变成行间特性（原本块状特性改变）

新单位

rpx 是小程序提供的一种自适应单位，与iphone6的尺寸是1:1，推荐设计稿以IPHONE6为原型

---

rpx 与 px 的区别是什么？

1、px不会自适应，无论什么机型，什么尺寸屏幕都是一个大小，有些字体不随设备屏幕发生变化时使用px
2、rpx会自适应，根据机型发生相应改变

Promise

• 串行请求（请求之间有依赖）

// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});

// 要求执行顺序1、2、3
req1.then(res => {
    return req2;
}).then(res => {
    return req3;
});

• 并行请求（请求之间无依赖）

// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});

// 要求并行执行1、2、3 全部执行完才执行then中的回调函数
Promise.all([req1, req2, req3])
.then(res => {

});

// 要求并行执行1、2、3 谁先执行完就执行then中的回调函数
Promise.race([req1, req2, req3])
.then(res => {

});

• 复合请求（既有串，也有并）

// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});

let req4 = req1.then(res => {
    return req2;
})

// 要求串行执行1、2，与3并行执行
Promise.all([req4, req3])
.then(res => {

});

// 要求串行执行1、2，与3并行执行
Promise.race([req4,, req3])
.then(res => {

});

• then中的返回值

有4种情况：
1、返回Promise
2、返回具体的值
3、不返回
4、抛错误

无论2还是3，then都会返回一个Promise对象，而且对象中执行resolve()方法
// 有返回值val
resolve(val)

// 不返回
resolve(undefined)

**所以后面then都会执行第一个函数

• catch

catch为then的语法糖，它是then(null, rejection)的别名。
也就是说，catch也是then，它用于捕获错误，它的参数也就是是then的第二个参数。
所以，假设catch中如果return 值的话，新的Promise对象也会是接受状态。

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    reject(i);
})
example
.catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
.then(() =>{console.log('我是第一个then的回调函数');    throw Error    })
.catch(()=>{console.log('我是第二个catch的回调函数')})
.then(() => {console.log('我是第二个then的回调函数')})


调用reject函数后，promise变为rejected状态，故执行第一个catch的回调函数
第一个catch的回调函数return 1，故执行第一个then的回调函数
第一个then的回调函数throw Error，故执行第二个catch的回调函数
第二个catch的回调函数ruturn undefined（如上文所言），故执行第二个then的回调函数

链接描述

自定义登录态

请求封装

全局样式

全局样式写在：app.wxss

---

page{
    color: #999999;
    font-size: 33rpx;
}

wxs页面脚本

• wxs作用

1、页面渲染

2、数据处理

**wxs可以使用js代替，是否代替取决于个人决定
**wxs类似html页面中内嵌js代码
**wxml文件内部不能编写js或调用js，如果想调用，必须使用wxs

• wxs使用两种方式

1、使用.wxs文件（可重用性更好）

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

2、使用<wxs>标签（在wxml中）

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

注意事项

1、CSS选择器其实比官方文档支持得更多
2、自定义组件的容器如果是行间元素，那么最外层元素会有最小高度21px，所以请尽量使用块状元素作为容器
3、wxml不但可以获取对象的属性，还可以获取具体数组元素
<text>{{arr[0]}}</text>
<text>{{obj.pro}}</text>